import styled from '@emotion/styled';
import React from 'react';
import { Image } from 'antd';

interface CustomerImagesProps {
	url?: string;
	userRole?: string;
}

const CustomerImagesContainer = styled.div``;

const CustomerImagesContent = styled.div`
	background-color: rgba(250, 250, 251, 1);
	margin: 0 14px;
`;

const CustomerImagesBox = styled.div`
	padding: 20px 20px 32px 20px;
`;

const CustomerImagesImg = styled(Image)`
	width: 100%;
`;

const CustomerImagesRoleSpan = styled.div`
	font-size: 12px;
	color: #666666;
	margin-bottom: 6px;
`;
const CustomerImages = (props: CustomerImagesProps) => {
	const { url, userRole } = props;
	return (
		<CustomerImagesContainer>
			<CustomerImagesContent>
				<CustomerImagesBox>
					<CustomerImagesRoleSpan>{userRole === 'normal' ? '' : userRole}</CustomerImagesRoleSpan>
					<CustomerImagesImg src={url} rootClassName={'widget-img-preview'}></CustomerImagesImg>
				</CustomerImagesBox>
			</CustomerImagesContent>
		</CustomerImagesContainer>
	);
};

export default CustomerImages;
